<template>
	<view class="">
		<view class="">
			<u-index-list :scrollTop="scrollTop" :index-list="indexList">
				<view v-for="(item, index) in provList" :key="index">
					<u-index-anchor :index="item.letter" style="z-index: 1000000000000;" />
					<view @click="selectCity(item1.provId)" class="list-cell u-border-bottom"
						v-for="(item1, index1) in item.data" :key="index1">
						{{item1.provName}}
					</view>
				</view>
			</u-index-list>
		</view>
		<view class="poppupBox" v-show="cityShow">
			<view v-for="(item2, index2) in cityList" :key="index2" class="cityList" @click="queryCity(item2)">

				{{item2.cityName}}

			</view>

		</view>
	</view>
</template>

<script>
	import API from "@/api/common.js"
	import app from "../../App.vue"
	export default {
		name: "city",
		onShow() {
			this.getProvJson();
		},
		data() {
			return {
				cityShow: false,
				// https: getApp().globalData.picturePath,
				scrollTop: 0,
				indexList: [],
				provList: [],
				cityList: [
				],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			getProvJson() {
				// this.indexList = this.provList.map(val => {
				// 	return val.letter;
				// })
				API.getProvJson().then(res => {
					console.log(res);
					this.provList = res.data;
					this.indexList = this.provList.map(val => {
						return val.letter;
					})
				})
			},
			// 选择
			selectCity(provId) {
				this.cityShow = true;
				let data = {
					provId:provId
				}
				API.getCityJson(data).then(res => {
					console.log(res);
					this.cityList = res.data;
				})
			},
			
			queryCity(item){
				app.globalData.cityName = item.cityName
				app.globalData.cityId = item.cityId
				uni.navigateBack({
					delta: 1
				})
			}

		}
	}
</script>

<style lang="scss">
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;
	}

	.poppupBox {
		width: 60%;
		height: 100%;
		overflow-y: scroll;
		position: fixed;
		right: 0;
		top: 0;
		box-shadow: 2px 2px 2px 2px #ccc;
		z-index: 800000;
		background-color: #fff;
		-webkit-animation: spin 1.4s linear infinite;
			animation: spin 1.4s linear infinite;

	}
	
	.cityList{
		width: 100%;
		
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		line-height: 60rpx;
		border-bottom: 1px solid #efefef;
	}

	.u-index-bar__sidebar.data-v-62136660 {
		z-index: 100000000 !important;
	}
</style>
